import { 
  Calendar, 
  Users, 
  CheckCircle, 
  Clock, 
  BarChart3, 
  TrendingUp, 
  Plus,
  MoreHorizontal,
  ArrowRight,
  Target,
  Activity,
  FileText,
  Folder
} from 'lucide-react';
import { truncateUserId } from '@/lib/utils';

interface ProjectOverviewPageProps {
  params: { userId: string };
}

// 获取项目数据的函数
async function getProjectData(userId: string) {
  return {
    user: {
      name: truncateUserId(userId),
    },
    stats: {
      totalProjects: 24,
      activeProjects: 8,
      completedTasks: 156,
      teamMembers: 12,
      deadline: '15 days',
      progress: 67
    },
    recentProjects: [
      {
        id: 1,
        name: 'E-commerce Platform',
        progress: 85,
        status: 'In Progress',
        deadline: '2024-02-15',
        team: 6,
        color: 'from-blue-500 to-cyan-500'
      },
      {
        id: 2,
        name: 'Mobile App Design',
        progress: 45,
        status: 'Planning',
        deadline: '2024-03-01',
        team: 4,
        color: 'from-purple-500 to-pink-500'
      },
      {
        id: 3,
        name: 'Dashboard Analytics',
        progress: 92,
        status: 'Review',
        deadline: '2024-01-30',
        team: 3,
        color: 'from-green-500 to-emerald-500'
      },
      {
        id: 4,
        name: 'Brand Identity',
        progress: 30,
        status: 'Design',
        deadline: '2024-02-28',
        team: 2,
        color: 'from-orange-500 to-red-500'
      }
    ],
    recentActivity: [
      {
        id: 1,
        action: 'Task completed',
        description: 'Homepage design finalized',
        user: 'Sarah Johnson',
        time: '2 hours ago',
        type: 'success'
      },
      {
        id: 2,
        action: 'New comment',
        description: 'Feedback on mobile layouts',
        user: 'Mike Chen',
        time: '4 hours ago',
        type: 'comment'
      },
      {
        id: 3,
        action: 'File uploaded',
        description: 'Updated project specifications',
        user: 'Alex Kumar',
        time: '6 hours ago',
        type: 'file'
      },
      {
        id: 4,
        action: 'Milestone reached',
        description: 'Backend API development complete',
        user: 'David Wilson',
        time: '1 day ago',
        type: 'milestone'
      }
    ]
  };
}

export default async function ProjectOverviewPage({ params: { userId } }: ProjectOverviewPageProps) {
  const projectData = await getProjectData(userId);

  return (
    <div className="space-y-6">
      {/* Page Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">Project Overview</h1>
          <p className="text-muted-foreground mt-1">Track your projects and team performance</p>
        </div>
        <button className="flex items-center space-x-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-all duration-200 shadow-lg">
          <Plus className="h-4 w-4" />
          <span className="text-sm font-medium">New Project</span>
        </button>
      </div>

      {/* Stats Overview */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {/* Total Projects */}
        <div className="bg-white dark:bg-slate-800 rounded-xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm">
          <div className="flex items-center justify-between mb-4">
            <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
              <Folder className="w-6 h-6 text-blue-600 dark:text-blue-400" />
            </div>
            <span className="text-xs font-medium text-green-600 bg-green-100 dark:bg-green-900/20 px-2 py-1 rounded-full">
              +12%
            </span>
          </div>
          <h3 className="text-sm font-medium text-muted-foreground mb-1">Total Projects</h3>
          <p className="text-3xl font-bold text-foreground">{projectData.stats.totalProjects}</p>
        </div>

        {/* Active Projects */}
        <div className="bg-white dark:bg-slate-800 rounded-xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm">
          <div className="flex items-center justify-between mb-4">
            <div className="w-12 h-12 bg-orange-100 dark:bg-orange-900/20 rounded-lg flex items-center justify-center">
              <Activity className="w-6 h-6 text-orange-600 dark:text-orange-400" />
            </div>
            <span className="text-xs font-medium text-green-600 bg-green-100 dark:bg-green-900/20 px-2 py-1 rounded-full">
              +8%
            </span>
          </div>
          <h3 className="text-sm font-medium text-muted-foreground mb-1">Active Projects</h3>
          <p className="text-3xl font-bold text-foreground">{projectData.stats.activeProjects}</p>
        </div>

        {/* Completed Tasks */}
        <div className="bg-white dark:bg-slate-800 rounded-xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm">
          <div className="flex items-center justify-between mb-4">
            <div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center">
              <CheckCircle className="w-6 h-6 text-green-600 dark:text-green-400" />
            </div>
            <span className="text-xs font-medium text-green-600 bg-green-100 dark:bg-green-900/20 px-2 py-1 rounded-full">
              +25%
            </span>
          </div>
          <h3 className="text-sm font-medium text-muted-foreground mb-1">Completed Tasks</h3>
          <p className="text-3xl font-bold text-foreground">{projectData.stats.completedTasks}</p>
        </div>

        {/* Team Members */}
        <div className="bg-white dark:bg-slate-800 rounded-xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm">
          <div className="flex items-center justify-between mb-4">
            <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center">
              <Users className="w-6 h-6 text-purple-600 dark:text-purple-400" />
            </div>
            <span className="text-xs font-medium text-green-600 bg-green-100 dark:bg-green-900/20 px-2 py-1 rounded-full">
              +3
            </span>
          </div>
          <h3 className="text-sm font-medium text-muted-foreground mb-1">Team Members</h3>
          <p className="text-3xl font-bold text-foreground">{projectData.stats.teamMembers}</p>
        </div>
      </div>

      {/* Main Content Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Recent Projects */}
        <div className="lg:col-span-2 bg-white dark:bg-slate-800 rounded-xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-xl font-semibold text-foreground">Recent Projects</h2>
            <button className="text-sm text-primary hover:text-primary/80 font-medium flex items-center space-x-1">
              <span>View All</span>
              <ArrowRight className="w-4 h-4" />
            </button>
          </div>

          <div className="space-y-4">
            {projectData.recentProjects.map((project) => (
              <div key={project.id} className="border border-slate-200 dark:border-slate-700 rounded-lg p-4 hover:shadow-md transition-shadow duration-200">
                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center space-x-3">
                    <div className={`w-10 h-10 bg-gradient-to-br ${project.color} rounded-lg flex items-center justify-center shadow-sm`}>
                      <Target className="w-5 h-5 text-white" />
                    </div>
                    <div>
                      <h3 className="text-lg font-medium text-foreground">{project.name}</h3>
                      <p className="text-sm text-muted-foreground">{project.status}</p>
                    </div>
                  </div>
                  <button className="p-2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors">
                    <MoreHorizontal className="w-4 h-4 text-muted-foreground" />
                  </button>
                </div>

                <div className="mb-3">
                  <div className="flex items-center justify-between text-sm mb-2">
                    <span className="text-muted-foreground">Progress</span>
                    <span className="font-medium text-foreground">{project.progress}%</span>
                  </div>
                  <div className="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2">
                    <div 
                      className={`h-2 bg-gradient-to-r ${project.color} rounded-full transition-all duration-300`}
                      style={{ width: `${project.progress}%` }}
                    ></div>
                  </div>
                </div>

                <div className="flex items-center justify-between text-sm">
                  <div className="flex items-center space-x-4">
                    <div className="flex items-center space-x-1">
                      <Calendar className="w-4 h-4 text-muted-foreground" />
                      <span className="text-muted-foreground">{project.deadline}</span>
                    </div>
                    <div className="flex items-center space-x-1">
                      <Users className="w-4 h-4 text-muted-foreground" />
                      <span className="text-muted-foreground">{project.team} members</span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Recent Activity */}
        <div className="bg-white dark:bg-slate-800 rounded-xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-xl font-semibold text-foreground">Recent Activity</h2>
            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
          </div>

          <div className="space-y-4">
            {projectData.recentActivity.map((activity) => (
              <div key={activity.id} className="flex items-start space-x-3">
                <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
                  activity.type === 'success' ? 'bg-green-100 dark:bg-green-900/20' :
                  activity.type === 'comment' ? 'bg-blue-100 dark:bg-blue-900/20' :
                  activity.type === 'file' ? 'bg-orange-100 dark:bg-orange-900/20' :
                  'bg-purple-100 dark:bg-purple-900/20'
                }`}>
                  {activity.type === 'success' && <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400" />}
                  {activity.type === 'comment' && <Activity className="w-4 h-4 text-blue-600 dark:text-blue-400" />}
                  {activity.type === 'file' && <FileText className="w-4 h-4 text-orange-600 dark:text-orange-400" />}
                  {activity.type === 'milestone' && <Target className="w-4 h-4 text-purple-600 dark:text-purple-400" />}
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm text-foreground font-medium">{activity.action}</p>
                  <p className="text-sm text-muted-foreground">{activity.description}</p>
                  <div className="flex items-center space-x-2 mt-1">
                    <span className="text-xs text-muted-foreground">{activity.user}</span>
                    <span className="text-xs text-muted-foreground">•</span>
                    <span className="text-xs text-muted-foreground">{activity.time}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <button className="w-full mt-4 py-2 text-sm text-primary hover:text-primary/80 font-medium transition-colors">
            View All Activity
          </button>
        </div>
      </div>

      {/* Progress Overview */}
      <div className="bg-white dark:bg-slate-800 rounded-xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm">
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-xl font-semibold text-foreground">Project Progress Overview</h2>
          <div className="flex items-center space-x-2">
            <span className="text-sm text-muted-foreground">Overall Progress:</span>
            <span className="text-lg font-bold text-primary">{projectData.stats.progress}%</span>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="text-center">
            <div className="w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg">
              <CheckCircle className="w-8 h-8 text-white" />
            </div>
            <h3 className="text-lg font-semibold text-foreground mb-1">Completed</h3>
            <p className="text-3xl font-bold text-green-600">12</p>
            <p className="text-sm text-muted-foreground">Projects</p>
          </div>

          <div className="text-center">
            <div className="w-20 h-20 bg-gradient-to-br from-orange-500 to-red-500 rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg">
              <Clock className="w-8 h-8 text-white" />
            </div>
            <h3 className="text-lg font-semibold text-foreground mb-1">In Progress</h3>
            <p className="text-3xl font-bold text-orange-600">8</p>
            <p className="text-sm text-muted-foreground">Projects</p>
          </div>

          <div className="text-center">
            <div className="w-20 h-20 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg">
              <BarChart3 className="w-8 h-8 text-white" />
            </div>
            <h3 className="text-lg font-semibold text-foreground mb-1">Planning</h3>
            <p className="text-3xl font-bold text-blue-600">4</p>
            <p className="text-sm text-muted-foreground">Projects</p>
          </div>
        </div>
      </div>
    </div>
  );
} 